<!--
 * @Author: duanwenpeng
 * @Date: 2021-09-30 15:34:17
 * @LastEditTime: 2021-10-07 09:35:00
 * @LastEditors: 段文棚
 * @FilePath: \zhiyu-form-design-vue3\src\formCmpUi\formCmpUi.vue
 * @Description: 渲染组件
-->
<template>
    <div class="formComponent">
        <!-- 基础组件 -->
        <el-form-item v-if="formItem.type === 'button'" :label="formItem.label">
            <el-button>{{ formItem.label }}</el-button>
        </el-form-item>
        <!-- 表单组件 -->
        <el-form-item v-if="formItem.type === 'input'" :label="formItem.label">
            <el-input v-model="formItem.default"></el-input>
        </el-form-item>
        <el-form-item
            v-if="formItem.type === 'textarea'"
            :label="formItem.label"
        >
            <el-input type="textarea" v-model="formItem.default"></el-input>
        </el-form-item>
        <el-form-item v-if="formItem.type === 'radio'" :label="formItem.label">
            <el-radio></el-radio>
        </el-form-item>
        <el-form-item
            v-if="formItem.type === 'checkbox'"
            :label="formItem.label"
        >
            <el-checkbox></el-checkbox>
        </el-form-item>
    </div>
</template>

<script>
import { computed } from "@vue/reactivity";
export default {
    name: "element-ui",
    props: {
        formComponent: Object, // props中的属性必须先定义类型 否则是setup中的获取的是undefind
    },
    setup(props) {
        let formItem = computed(() => {
            return props.formComponent;
        });
        return {
            formItem,
        };
    },
};
</script>

<style lang="less" scoped>
.el-form-item__label {
    white-space: nowrap;
}
</style>
